<template>
    <div>
        <!--    搜索表单-->
        <div style="margin-bottom: 20px;margin-top:-10px">
            <span style="float:left;margin-top:24px;font-size: large">患者信息:</span>
            <el-tag style="float:left;margin-top:12px;  width: 80px;" type="success;">挂号id:{{ RegisterForm.id }}</el-tag>
            <el-tag style="float:left;margin-top:12px;  width: 80px;" type="success;">姓名:{{ RegisterForm.realName
            }}</el-tag>
            <el-tag style="float:left;margin-top:12px;width: 110px;" type="success;">病历号:{{ RegisterForm.caseNumber
            }}</el-tag>
            <el-tag style="float:left;margin-top:12px;">年龄{{ RegisterForm.age }}</el-tag>
            <el-tag style="float:left;margin-top:12px;">性别{{ RegisterForm.gender }}</el-tag>
            <br><br>
        </div>
        <div style="margin-bottom: 20px">
            <el-divider></el-divider>
            <div style="float: left;margin-top: -10px">
                <i style="font-size: x-large" class="el-icon-document-checked"></i><span
                    style="margin-left:10px;font-weight:bold;font-size:x-large">检验申请</span>
            </div>
            <br>
        </div>
        <el-divider></el-divider>
        <br>
        <div>
            <div>
                <el-table :data="ConfirmInspectionTable" tooltip-effect="dark"
                    style="margin-top:12px;margin-left:-167px;float: left;width: 91%">
                    <el-table-column prop="id" label="检验id" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="techCode" label="检验编码" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="techName" label="检验名称" width="120">
                    </el-table-column>
                    <el-table-column prop="techPrice" label="单价" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="creationTime" label="开立时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="medium" :plain="true"
                                style="width:67px;margin-left:-89px;float:right"
                                @click="deleteRow(scope.$index, scope.row)" @click.native.prevent="removeRow(scope.$index, ConfirmInspectionTable)">删除</el-button>
                            <el-button type="primary" size="medium" @click="SelectRow(scope.row)">选中</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-popover placement="right" width="989" trigger="click">
                    <div>
                        <el-input v-model="inputTeachName" style="width: 270px;float: left;" placeholder="请输入检验项目名称"
                            clearable></el-input>
                        <el-button style="float:right;margin-top:0px;width:100px;margin-left:20px;" icon="el-icon-search"
                            type="primary" @click="selectByCondition">搜索</el-button>

                        <span
                            style="float:left;margin-left:50px;margin-top:23px;font-size: larger;font-weight: bold">医技项目表</span>
                    </div>
                    <br> <br>
                    <el-table :data="InspectionTable" style="width: 100%" height="250">
                        <el-table-column label="ID" prop="id" fixed>
                        </el-table-column>
                        <el-table-column label="项目编码" prop="techCode">
                        </el-table-column>
                        <el-table-column label="项目名称" prop="techName">
                        </el-table-column>
                        <el-table-column label="单价" prop="techPrice">
                        </el-table-column>
                        <el-table-column label="类型" prop="techType">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <!-- 让确认的这一行显示到外层表格中 -->
                                <el-button type="primary" @click="handleRowClick(scope.row)">确认</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 增加就不要全部加载疾病信息了，内容特多，加载特慢 -->
                    <el-button slot="reference">增加</el-button>
                </el-popover>
            </div>
            <span style="float:left;margin-left:-1276px;margin-top:167px;font-size: larger;font-weight: bold">医嘱</span>
            <el-form>
                <el-form-item style="margin-top:67px;height:20px;margin-left:5px;font-size: medium;float: left"
                    label="目的要求">
                    <el-input v-model="inspectionInfo" style="float:left;margin-top:-45px;margin-left:89px;width: 1210px"
                        type="textarea" placeholder="请输入目的要求"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:25px;height:20px;margin-left:10px;font-size: medium;float: left"
                    label="检验部位:">
                    <el-input v-model="inspectionPosition" style="float:left;margin-top:-37px;margin-left:84px;width: 1210px"
                        type="textarea" placeholder="请输入检查部位"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:25px;height:20px;margin-left:10px;font-size: medium;float: left"
                    label="备注:">
                    <el-input v-model="inspectionRemark" style="float:left;margin-top:-37px;margin-left:84px;width: 1210px"
                        type="textarea" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <br>
        <el-button style="float:left;margin-top:134px;margin-left:-1201px" type="primary"
            @click="updateOthers">申请提交</el-button>
        <el-button style="float:left;margin-top:134px;margin-left:-1079px" type="primary" @click="clear">清空表格</el-button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    mounted() {
        //获取session中的id
        this.RegisterForm.id = sessionStorage.getItem('registerId')///挂号id
        //初始化患者信息
        this.init()
    },
    data() {
        return {
            RegisterForm: {//储存患者信息
                id: '',//挂号id
                realName: '',
                caseNumber: '',
                age: '',
                gender: ''
            },
            inputTeachName: '',
            teachType: '检验',
            InspectionTable: [],
            ConfirmInspectionTable: [],
            inspectionInfo: '',
            inspectionPosition: '',
            inspectionRemark: '',
            inspectionId: '',
            selectedInspectionId: '',//选中行的检查id
            // 创建一个新的对象，并设置id的值
            newData: {
                id: '',
                techCode: '',
                techName: '',
                techPrice: '',
                creationTime: ''
            },
        }
    },
    methods: {
        //拿到挂号id后去搜索对应患者信息，展示在前端上
        async init() {
            //初始化患者信息
            await axios.get("http://127.0.0.1:8088/register/selectById", { params: { id: this.RegisterForm.id } }).then((res) => {
                console.log(res.data.data)
                //绑定数据
                this.RegisterForm.realName = res.data.data.realName
                this.RegisterForm.caseNumber = res.data.data.caseNumber
                this.RegisterForm.age = res.data.data.age
                this.RegisterForm.gender = res.data.data.gender
                this.$message({
                    message: '患者信息初始化成功',
                    type: 'success'
                });
            });
        },

        //移除行
        removeRow(index, rows){
            rows.splice(index, 1)
        },
        //删除检验记录
        async deleteRow(index, row) {
            //数据库中删除
            await axios.get("http://127.0.0.1:8088/inspection/deleteById", { params: { id: row.id } }).then((res) => {
                console.log("要删除的检验id为： " + row.id)
                console.log(res.data.data)
            });
        },

        //根据id搜索检验表
        //参数：int id
        async selectById() {
            await axios.get("http://127.0.0.1:8088/inspection/selectById", { params: { id: this.inspectionId } }).then((res) => {
                console.log(res.data.data)
                //在确认的表中插入开设的检查项目

                //设置新的对象值
                this.newData.id = res.data.data.id
                this.newData.creationTime = res.data.data.creationTime
            });
        },

        //根据名字搜索检查项目名
        //参数：String techType, String techName
        async selectByCondition() {
            await axios.get("http://127.0.0.1:8088/medicaltechnology/selectByCondition", { params: { techType: this.teachType, techName: this.inputTeachName } }).then((res) => {
                console.log(res.data.data)
                //绑定数据
                this.InspectionTable = res.data.data
            });
        },

        //开设检验项
        //参数：int registerId, int medicalTechnologyId, String inspectionState
        async handleRowClick(row) {
            await axios.get("http://127.0.0.1:8088/inspection/insert", { params: { registerId: this.RegisterForm.id, medicalTechnologyId: row.id, inspectionState: '已开立' } }).then((res) => {
                console.log("medicalTechnologyId为：  " + row.id)
                console.log(res.data.data)
                //得到检验id
                this.inspectionId = res.data.data

                //拿到检验id后，得到检验表中的数据
                this.selectById()
                //设置新的对象值
                this.newData.techName = row.techName
                this.newData.techCode = row.techCode
                this.newData.techPrice = row.techPrice

                //将新对象插入确定的检查数组中
                this.ConfirmInspectionTable.push(this.newData)
            });
        },

        //拿到选中行的检查id,供更新数据使用
        async SelectRow(row) {
            this.selectedInspectionId = row.id
            console.log("选中的检查id为：  " + this.selectedInspectionId)
        },

        //更新检查表格中的其他数据
        //参数：int id,String checkInfo,String checkPosition,String checkRemark
        async updateOthers() {
            await axios.get("http://127.0.0.1:8088/inspection/updateOthers", { params: { id: this.selectedInspectionId, inspectionInfo:this.inspectionInfo, inspectionPosition:this.inspectionPosition, inspectionRemark:this.inspectionRemark } }).then((res) => {
                console.log(res.data.data)
                this.$message({
                    message: '检验单数据更新成功',
                    type: 'success'
                });
            });
        },

        //清空
        clear(){
            this.inspectionInfo='',
            this.inspectionPosition='',
            this.inspectionRemark=''
        }

    }
}
</script>
<style scoped></style>